<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script src="../../js/vue.js"></script>
</head>
<style>
    * {
        margin: 20px;
    }

    .demo1 {
        height: 50px;
        background-color: skyblue;
    }

    .demo2 {
        height: 30px;
        background-color: red;
    }
</style>
<body>

<div class="root">
    <h2>欢迎回来学习{{name}}</h2>
    <div class="demo1" @click="showInfo">
        <!--默认点击按钮之后会出现事件冒泡,冒泡到div中,加上.stop:点击按钮之后不会出现事件冒泡,阻止冒泡-->
        <button @click="showInfo">点击提示信息(有事件冒泡)</button>
        <button @click.stop="showInfo">点击提示信息(无事件冒泡)</button>
    </div>
    <hr>
    <!--  事件只执行一次-->
    <button @click.once="showInfo">点击提示信息</button>
    <!--  捕获模式-->
    <div @click="div1Info" class="demo1">
        <div @click.capture="div2Info" class="demo2">
            <button @click="buttonInfo">点击我</button>
        </div>
    </div>

</div>
<script>
    const vm = new Vue({
        el: '.root',
        data: {
            name: '前端',
        },
        // 定义函数
        methods: {
            showInfo(event) {
                console.log(event)
                console.log(this)
                alert('showInfo')

            },
            buttonInfo() {
                alert('我是按钮')

            },
            div2Info() {
                alert('我是div2')

            },
            div1Info() {
                alert('我是div1111')

            }
        },


    })
    /**
     * vue中的事件修饰符:
     *  1.prevent:阻止默认事件
     *  2.stop:阻止事件冒泡
     *  3.once:事件只触发一次: 第一次触发事件时才执行函数,之后触发事件不执行函数
     *  4.capture:使用事件的捕获模式(相对于冒泡模式)    在加入这个属性的元素中,如果有事件发生,从这个元素往下执行对应事件监听器,之后再从这个元素开始往上冒泡
     *  5.self:只有event.target时当前操作的元素时才触发,用于事件委托
     *  6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕
     *          例如:定义一个滚动条,不加该属性的话  当鼠标滚动一下,随后触发函数调用,当函数调用完了在将滚动条往下滚动一点
     *                           加了该属性之后,优先响应滚动效果,再去调用函数
     *
     *
     *  事件修饰符可以连续使用:
     *  @click.stop.prevent先阻止冒泡再停止默认行为 @click.prevent.stop先停止默认行为再阻止冒泡
     *
     *
     */
</script>
</body>
</html>